<template>
  <div
    class="app-container"
    v-loading="loading"
    element-loading-text="加载中..."
    style="height: 100%"
  >
    <div class="app-container-inner" style="display: flex; flex-direction: column">
      <div class="header">
        <!-- <div class="btns"> -->
        <router-link to="/storage/newout">
          <HPlainButton>新增出库</HPlainButton>
        </router-link>
        <!-- </div> -->
        <div class="search">
          <!-- 日期类型 -->
          <el-select
            class="search-item"
            v-model="storeListSearch.dateType"
            placeholder="日期类型"
            clearable
            @change="storeListSearch.dateType == 1 ? '' : getListOutStoreRows()"
          >
            <el-option
              v-for="item in dateType"
              :key="item.value"
              :value="item.value"
              :label="item.title"
            />
          </el-select>

          <div class="date-range" v-if="storeListSearch.dateType == 1">
            <el-date-picker
              v-model="storeListSearch.startTime"
              type="date"
              placeholder="开始日期"
              value-format="YYYY-MM-DD"
              style="height: 28px"
              @change="onDatePicketChange"
            />
            <span>~</span>
            <el-date-picker
              v-model="storeListSearch.endTime"
              type="date"
              placeholder="结束日期"
              value-format="YYYY-MM-DD"
              style="height: 28px"
              @change="onDatePicketChange"
            />
          </div>

          <!-- 单据来源 -->
          <el-select
            @change="getListOutStoreRows"
            class="search-item"
            v-model="storeListSearch.source"
            placeholder="单据来源"
            clearable
          >
            <el-option
              v-for="item in source"
              :key="item.value"
              :value="item.value"
              :label="item.title"
            />
          </el-select>

          <!-- 出库单状态 -->
          <el-select
            class="search-item"
            @change="getListOutStoreRows"
            v-model="storeListSearch.status"
            placeholder="出库单状态"
            clearable
          >
            <el-option
              v-for="item in status"
              :key="item.value"
              :value="item.value"
              :label="item.title"
            />
          </el-select>

          <!-- 出库类型 -->
          <el-select
            class="search-item"
            @change="getListOutStoreRows"
            placeholder="出库类型"
            filterable
            clearable
            v-model="storeListSearch.typeId"
            :filter-method="changeOutType"
            remote-show-suffix
          >
            <el-option
              v-for="item in outStoreType"
              :key="item.name"
              :value="item.id"
              :label="item.name"
            />
          </el-select>

          <!-- 出库单号/收货人/手机号/制单人 -->
          <el-input
            v-model="storeListSearch.search"
            class="search-item search-input"
            @keyup.enter="getListOutStoreRows"
            @clear="getListOutStoreRows"
            clearable
            placeholder="出库单号/收货人/手机号/制单人"
          />

          <!-- 搜索/重置 -->
          <div class="filter">
            <HButton type="primary" @click="getListOutStoreRows">
              <el-icon>
                <Search />
              </el-icon>
              搜索
            </HButton>
            <HButton @click="clearVlaue">
              <el-icon>
                <RefreshRight />
              </el-icon>
              重置
            </HButton>
          </div>
        </div>
      </div>

      <div class="table" style="flex: 1; position: relative">
        <el-table
          border
          stripe
          resizable
          :data="tableDataList"
          @row-dblclick="goDetailPage"
          height="100%"
          style="position: absolute"
        >
          <template #empty>
            <el-empty description="暂无数据" :image-size="140" />
          </template>
          <!-- 序号 -->
          <el-table-column show-overflow-tooltip type="index" fixed label="序号" width="50" />

          <!-- 出库单号 -->
          <el-table-column
            show-overflow-tooltip
            prop="outboundNo"
            fixed
            label="出库单号"
            width="130"
          >
            <template v-slot="i">
              <HLink @click="goDetailPage(i.row)">{{ i.row.outboundNo }}</HLink>
            </template>
          </el-table-column>

          <!-- 单据类型 -->
          <el-table-column show-overflow-tooltip prop="type" label="单据类型" width="120" />

          <!-- 出库单状态 -->
          <el-table-column show-overflow-tooltip prop="status" label="出库单状态" width="88">
            <template #default="scope">
              <HStatus type="warning" v-if="scope.row.status === 1">待审核</HStatus>
              <HStatus type="warning" v-if="scope.row.status === 2">待出库</HStatus>
              <HStatus type="error" v-if="scope.row.status === 3">已驳回</HStatus>
              <HStatus type="success" v-if="scope.row.status === 4">已出库</HStatus>
              <HStatus type="info" v-if="scope.row.status === 5">已作废</HStatus>
            </template>
          </el-table-column>

          <!-- 仓库名称 -->
          <el-table-column show-overflow-tooltip prop="store" label="仓库名称" min-width="120" />

          <!-- 仓库类型 -->
          <el-table-column show-overflow-tooltip label="仓库类型" width="90">
            <template v-slot="i">
              {{ storeType[i.row.storeType].title }}
            </template>
          </el-table-column>

          <!-- 出库类型 -->
          <el-table-column show-overflow-tooltip prop="type" label="出库类型" width="120" />

          <!-- 收获名称 -->
          <el-table-column show-overflow-tooltip label="收货名称" min-width="150">
            <template #default="i">{{ i.row.receiptName }}&nbsp;{{ i.row.receiptPhone }}</template>
          </el-table-column>

          <!-- 单据来源 -->
          <el-table-column show-overflow-tooltip label="单据来源" width="100">
            <template #default="i">{{ source[i.row.source - 1].title }}</template>
          </el-table-column>

          <!-- 收货地址类型 -->
          <el-table-column show-overflow-tooltip label="收货地址类型" width="100">
            <template #default="i">{{ receiptAddrType[i.row.receiptAddrType - 1].title }}</template>
          </el-table-column>

          <!-- 制单人 -->
          <el-table-column show-overflow-tooltip prop="createEmp" label="制单人" width="80" />

          <!-- 制单时间 -->
          <el-table-column show-overflow-tooltip prop="createTime" label="制单时间" width="128" />

          <!-- 最后更新时间 -->
          <el-table-column
            show-overflow-tooltip
            prop="updateTime"
            label="最后更新时间"
            width="128"
          />
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="footer flex-justify-end">
        <Pagination
          ref="pagination"
          :list_total="total"
          @size-change="getListOutStoreRows"
          @current-change="getListOutStoreRows"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import Pagination from '@/components/Pagination/index.vue'
  import { onMounted } from 'vue'
  import { Search, RefreshRight } from '@element-plus/icons-vue'
  import userOutbound from './userOutbound'
  import { ElMessage } from 'element-plus'
  import HPlainButton from '@/components/common/button/HPlainButton.vue'
  import HButton from '@/components/common/button/HButton.vue'
  import HLink from '@/components/common/link/HLink.vue'
  import HStatus from '@/components/common/status/HStatus.vue'
  import pageComponentName from '@/config/page-component-name'

  defineOptions({
    name: pageComponentName.storage.outStorageList,
  })

  const {
    getListOutStoreRows,
    dateType,
    goDetailPage,
    getoutStoreTypePageSelect,
    source,
    status,
    outStoreType,
    storeType,
    receiptAddrType,
    changeOutType,
    clearVlaue,
    loading,
    total,
    pagination,
    tableDataList,
    storeListSearch,
  } = userOutbound()

  // 日期选择事件
  const onDatePicketChange = () => {
    const endTimeStamp = new Date(storeListSearch.value.endTime).getTime()
    const startTimeStamp = new Date(storeListSearch.value.startTime).getTime()
    if (startTimeStamp > endTimeStamp) {
      ElMessage({
        type: 'error',
        message: '结束日期不能小于开始日期',
      })
    }
  }

  onMounted(() => {
    getListOutStoreRows()
    getoutStoreTypePageSelect('')
  })
</script>

<style scoped lang="scss">
  @import './index';
</style>
